<template>
  <view v-if="isLoad" v-show="showRequestLoading" class="request-loading-container">
    <view class="request-loading">
      <!--      <view class="loading-header-bg"></view>-->
      <view class="loading-body flex flex-column justify-center align-center">
        <view class="loading-logo-box">
          <image class="loading-img" :src="loadingGif"></image>
<!--          <view class="loading-content">{{ requestLoadingContent }}</view>-->
        </view>
      </view>
      <!--      <view class="loading-footer-bg"></view>-->
    </view>
  </view>
</template>

<script setup lang="ts">
import loadingGif from '@/static/loading.gif'
import {generateUUIDv4} from "@/utils";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/stores";

defineOptions({
  name: 'RequestLoading',
  // 微信小程序中 options 选项
})

const componentId = generateUUIDv4()
const isLoad = ref<boolean>(false);
const {requestLoadingId, showRequestLoading, requestLoadingContent} = storeToRefs(useAppStore());

onLoad(() => {
  if (!requestLoadingId.value) {
    isLoad.value = true;
    requestLoadingId.value = componentId;
  }
})
</script>

<style scoped lang="scss">
.request-loading-container {
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9998;

  .request-loading {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }

  .loading-body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 9;

    .loading-logo-box {
      width: 400rpx;
      height: 300rpx;
      max-width: 80%;
      background-color: rgba(0, 0, 0, 0.9);
      border-radius: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      position: relative;
      box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);

      .loading-img {
        width: 400rpx;
        height: 400rpx;
        position: absolute;
        left: calc(50% - 200rpx);
        top: calc(50% - 180rpx);
      }

      .loading-content {
        position: absolute;
        bottom: 10rpx;
        width: 100%;
        text-align: center;
        color: #c8c8c8;
      }
    }
  }
}

.loading-auth-image {
  width: 120px;
  height: 100%;
}

.logo {
  margin: 0 auto;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(180deg, #CCEDFF 0%, rgba(255, 255, 255, 0) 74%);
  position: relative;
  z-index: 9;

  box-sizing: border-box;
  border: 4rpx solid #fff;
  box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.1);

  .logo-image {
    width: 96rpx;
    height: 96rpx;
  }
}

.sys-name-zh {
  font-size: 48rpx;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  letter-spacing: 0em;
  color: #231815;
}

.sys-name-en {
  font-size: 18rpx;
  font-weight: 300;
  line-height: normal;
  text-align: center;
  letter-spacing: 0em;

  color: #231815;
}
</style>
